import moment from 'moment';
import _ from 'lodash';
import { TIME_ENUM, ToFixed } from '../../tool';
import {
  defaultPointerNum,
  forecastAndSimulateChartsLineTypeOptions,
  priceDiffCurveChartsLineTypeOptions,
  userAndSimulateChartsLineTypeOptions,
} from '../../dictionary';
import {
  IDeclareDetailChartsLineType,
  IForecastAndSimulateChartsLineType,
  IPriceDiffCurveChartsLineType,
  IBaseValueType,
  IUserAndSimulateChartsLineType,
} from '../../type';
import { getCssVariableValue } from '@/utils/utils';

// 格式化名称
export const formatName = (data, index) => {
  if (data.split('-').length && data.split('-').length > 1) {
    const dataArr = data.split('-');
    return dataArr.slice(index).join('');
  }
  return data;
};

// 计算最大值
export const calMax = (arr) => {
  let max = Math.max(...arr);
  if (0 < max && max < 10) {
    return Math.ceil(max);
  } else {
    let maxint = Math.ceil(max / 9.5);
    let maxval = maxint * 10;
    if (maxval == 0 || max < 0) {
      maxval = 0;
    }
    return maxval;
  }
};

// 计算最小值
export const calMin = (arr) => {
  let min = Math.min(...arr);
  if (0 > min && min > -10) {
    return Math.floor(min);
  } else {
    let minint = Math.floor(min / 10);
    let minval = minint * 10;
    return minval;
  }
};

// 计算xAxis
export function getXAxis(list) {
  const xAxisData = [];
  const xData = Object.keys(list);
  xData.forEach((i) => {
    const xAxis = Object.keys(Object.values(list)[0]);
    xAxis.forEach((m) => {
      const dataTime = `${formatName(i, 1)} ${m}`;
      xAxisData.push(dataTime.replace(/[-|.|:]/g, ''));
    });
  });
  return xAxisData;
}

export const TYPECOLOR = {
  0: {
    name: '调整比例',
    color: '#5E92F6',
  },
  1: {
    name: '最大值',
    color: '#E86452',
  },
  2: {
    name: '最小值',
    color: '#F5BE15',
  },
  3: {
    name: '固定值',
    color: '#67DCAB',
  },
};

const COLORLIST = ['#C55348'];
const AICOLORLIST = ['#3B72F6', '#ECC045'];
const USERCOLORLIST = ['#C55348', '#4CA576'];

// 系列相关
export function getSeri({ type, name, color, lineStyle, ...others }) {
  let config = {
    type,
    name,
    itemStyle: { color },
  };
  if (type === 'line') {
    config = {
      ...config,
      symbol: 'none',
      lineStyle: lineStyle || { width: 1 },
    };
  } else if (type === 'bar') {
    config = {
      barMaxWidth: 8,
      ...config,
    };
  }
  return {
    ...config,
    ...others,
  };
}

// 基础配置
export const getOptions = ({
  titleText,
  XAXIS,
  xAxis,
  tooltip,
  yAxis,
  grid,
  legendData,
  dataZoom,
  ...rest
}) => {
  return {
    title: {
      text: titleText,
      show: true,
      top: 8,
      left: -4,
      textStyle: {
        fontSize: 14,
        lineHeight: 14,
        color: getCssVariableValue('--font'),
      },
    },
    grid: grid || {
      top: 16,
      left: 46,
      bottom: 110,
      right: 0,
    },
    tooltip: tooltip || {
      trigger: 'axis',
      padding: 12,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
      position: function (point, params, dom, rect, size) {
        let x = 0;
        let y = 0;
        const pointX = point[0];
        const pointY = point[1];
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = pointX + 15;
        } else {
          x = pointX - boxWidth - 15;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else {
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      backgroundColor: '#161A1D',
      borderColor: '#161A1D',
      borderWidth: 1,
      textStyle: {
        color: '#A7A8A9',
        fontFamily: 'PingFang SC',
        fontStyle: 'none',
        fontSize: 12,
      },
    },
    legend: {
      left: 'center',
      top: 'bottom',
      padding: [16, 0, 0, 0],
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 8,
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
      },
      data: legendData,
      // inactiveColor: '#545454',
      // inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
    },
    xAxis: xAxis || {
      type: 'category',
      boundaryGap: false,
      data: XAXIS.map((v) => v || ''),
      splitNumber: Math.random(),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-font-color'),
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        color: getCssVariableValue('--font-a40'),
        fontStyle: 'DIN-Light',
        fontSize: 10,
        lineHeight: 12,
        margin: 9,
      },
    },
    yAxis: yAxis || {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    dataZoom: dataZoom || [
      {
        type: 'slider',
        start: 0,
        end: 100,
        bottom: 60,
        height: 20,
        backgroundColor: '#2B2E32',
        dataBackground: {
          lineStyle: {
            color: '#4E5154',
          },
          areaStyle: {
            color: '#2B2E32',
          },
        },
        selectedDataBackground: {
          lineStyle: {
            color: '#4E5154',
          },
          areaStyle: {
            color: '#646769',
            opacity: 0.2,
          },
        },
        borderColor: '#2B2E32',
        handleStyle: {
          color: '#646769',
        },
        moveHandleStyle: {
          color: '#EFF2F9',
        },
        brushSelect: false,
        showDetail: false,
      },
    ],
    ...rest,
  };
};

// tooltip
function formatNomalTooltip(val, date) {
  let _date = date ? moment(date).format('YYYYMMDD') : '';
  let str = `<div style='background: #161A1D;min-width:120px;display: inline-block;font-size: 12px; max-height: 400px;overflow-y: auto;'><div style='display: flex;align-items: center;color: #7A7D7F;margin-bottom: 4px'>
  <span>${_date}</span>
  <span style='margin-left: 4px'>${val[0].name}</span>
</div>`;
  val.map((item, index) => {
    str += `
        <div style='display: flex;justify-content: space-between;align-items: center;color: #A7A8A9;margin-bottom: ${
          index === val.length - 1 ? '0px' : '4px'
        }'>
          <div style='display: flex;justify-content: flex-start;align-items: center;margin-right:10px'>
            <span style='display:inline-block;width:10px;height:10px;border-radius:5px;background: ${
              item.color
            };margin-right: 4px'></span>
            <span>${item.seriesName}</span>
          </div>
          <span style='color: #A7A8A9; font-weight: 500'>${item.value ?? '-'}</span>
        </div>
      `;
  });
  str += `</div>`;
  return str;
}

// 自定义tooltip
const formatSpecialTooltip = (params, date) => {
  const upPartCodes = [
    IPriceDiffCurveChartsLineType.LINE_ONE,
    IPriceDiffCurveChartsLineType.LINE_TWO,
    IPriceDiffCurveChartsLineType.LINE_FIVE,
    // IPriceDiffCurveChartsLineType.LINE_SIX,
  ];
  let downPartCodes = [
    IPriceDiffCurveChartsLineType.LINE_THREE,
    IPriceDiffCurveChartsLineType.LINE_FOUR,
    // IPriceDiffCurveChartsLineType.LINE_SEVEN,
  ];
  let upPart = priceDiffCurveChartsLineTypeOptions
    ?.filter((item) => upPartCodes.includes(item.code))
    .map((item) => item.name);
  let upPartString = [];
  let downPart = priceDiffCurveChartsLineTypeOptions
    ?.filter((item) => downPartCodes.includes(item.code))
    .map((item) => item.name);
  let downPartString = [];
  upPart.forEach((upItem) => {
    params.forEach((paramsItem) => {
      if (upItem === paramsItem.seriesName) {
        upPartString.push(`
          <div style="width: 230px; margin-bottom: 4px; display:flex; justify-content:space-between;">
            <span>${paramsItem.marker} ${paramsItem.seriesName}</span>
            <span style='color: #A7A8A9; font-weight: 500'>${paramsItem.data}</span>
          </div>
        `);
      }
    });
  });
  downPart.forEach((downItem, index) => {
    params.forEach((paramsItem) => {
      if (downItem === paramsItem.seriesName) {
        downPartString.push(`
          <div style="width: 230px; margin-bottom: ${
            index === downPart.length - 1 ? '0px' : '4px'
          }; display:flex; justify-content:space-between;">
            <span>${paramsItem.marker} ${paramsItem.seriesName}</span>
            <span style='color: #A7A8A9; font-weight: 500'>${paramsItem.data}</span>
          </div>
        `);
      }
    });
  });
  let _date = date ? moment(date).format('YYYYMMDD') : '';
  let str = `
  <div style='background: #161A1D;min-width:120px;display: inline-block;font-size: 12px;'>
    <div style="color: #7A7D7F; margin-bottom: 4px;"><span>${_date}</span><span style='margin-left: 4px'>${params[0].name}</span></div>
      <div style="color: #A7A8A9;">
  `;
  str += upPartString.join('');
  if (upPartString.length && downPartString.length) {
    str += `
      <div style="width: 230px; height:0; border-top:1px solid #4E5154; margin: 0 0 4px 0;"></div>
    `;
  }
  str += downPartString.join('');
  str += `</div> </div>`;
  return str;
};

// 申报执行详情图表
export function beclareDetail(data = [], date, unit) {
  const _issueTime = moment(date).format('YYYY.MM.DD');
  const XAXIS = TIME_ENUM(defaultPointerNum);
  const grid = {
    top: 28,
    left: 10,
    bottom: 45,
    right: 10,
    containLabel: true,
  };
  const yAxis = [
    {
      type: 'value',
      // name: '电量(MWh)',
      name: unit,
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    // {
    //   type: 'value',
    //   name: '电价(元/MWh)',
    //   axisLine: {
    //     show: false,
    //     onZeroAxisIndex: 1,
    //   },
    //   axisTick: {
    //     alignWithLabel: true,
    //     length: 4,
    //     lineStyle: {
    //       color: '#737373',
    //     },
    //   },
    //   axisLabel: {
    //     color: '#6E6E6E',
    //     fontStyle: 'DIN-Light',
    //     fontSize: 12,
    //     margin: 8,
    //     height: 12,
    //   },
    //   splitLine: {
    //     show: false,
    //     lineStyle: {
    //       type: 'solid',
    //       color: 'rgba(115,115,115,0.2)',
    //     },
    //   },
    // },
  ];
  const _legendData = data.map((item) => {
    let _item = {
      name: item?.dataSourceName,
    };
    if (
      item?.dataSourceName !== IDeclareDetailChartsLineType.LINE_ONE &&
      item?.dataSourceName !== IDeclareDetailChartsLineType.LINE_TWO &&
      item?.dataSourceName !== IDeclareDetailChartsLineType.LINE_TEN &&
      item?.dataSourceName !== IDeclareDetailChartsLineType.LINE_ELEVEN
    ) {
      _item = {
        ..._item,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor: item?.colour || '#222629',
          // color: '#222629',
        },
      };
    }
    return _item;
  });
  const _series = data.map((item) => {
    const { pointList } = item || {};
    // const _pointList =
    //   pointList && Object.values(pointList) && Object.values(pointList)[0]
    //     ? Object.values(pointList)[0]
    //     : [];
    const _pointList = pointList[_issueTime] || [];
    let _item = {
      name: item?.dataSourceName || '',
      color: item?.colour || '#222629',
    };
    if (
      item?.dataSourceName == IDeclareDetailChartsLineType.LINE_ONE ||
      item?.dataSourceName == IDeclareDetailChartsLineType.LINE_TWO
    ) {
      _item = {
        ..._item,
        type: 'bar',
        stack: 'one',
        data: _pointList.map((item) => {
          return item?.value || item?.value === 0 ? ToFixed(item?.value) : '-';
        }),
      };
    } else if (
      item?.dataSourceName == IDeclareDetailChartsLineType.LINE_TEN ||
      item?.dataSourceName == IDeclareDetailChartsLineType.LINE_ELEVEN
    ) {
      _item = {
        ..._item,
        yAxisIndex: 1,
        data: _pointList.map((item) => {
          return item?.value || item?.value === 0 ? ToFixed(item?.value) : '-';
        }),
        type: 'line',
        itemStyle: { opacity: 0, color: item?.colour },
        lineStyle: {
          width: 1,
          type: 'dashed',
        },
      };
    } else {
      _item = {
        ..._item,
        type: 'line',
        data: _pointList.map((item) => {
          return item?.value || item?.value === 0 ? ToFixed(item?.value) : '-';
        }),
      };
    }
    return getSeri(_item);
  });
  const option = getOptions({
    titleText: '',
    XAXIS,
    grid,
    dataZoom: [],
    yAxis,
    legendData: _legendData,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatNomalTooltip(e, date),
      enterable: true,
      extraCssText: 'max-height: 75%; overflow: hidden scroll;',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
    },
    xAxis: {
      ...option.xAxis,
      boundaryGap: true,
    },
    series: _series,
  };
}

// 价差图表
export function priceDiffCurve(data = [], date, type = IBaseValueType.NO_BASE) {
  const xData = TIME_ENUM(defaultPointerNum);
  const grid = [
    {
      top: 28,
      left: 46,
      right: 46,
      height: '38.0%',
      bottom: 20,
    },
    {
      left: 46,
      right: 46,
      top: '66.4%',
      height: '27.4%',
      bottom: 28,
    },
  ];
  const legendDataList =
    type === IBaseValueType.BASE
      ? priceDiffCurveChartsLineTypeOptions.filter((item) => item.type !== IBaseValueType.NO_BASE)
      : priceDiffCurveChartsLineTypeOptions.filter((item) => item.type !== IBaseValueType.BASE);
  const legendData = legendDataList.map((item) => {
    if (item.code === IPriceDiffCurveChartsLineType.LINE_FOUR) {
      return {
        name: item.name,
      };
    } else {
      return {
        name: item.name,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor: item?.color || '#222629',
          // color: '#222629',
        },
      };
    }
  });

  const xAxis = [
    {
      type: 'category',
      data: xData,
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        alignWithLabel: true,
        color: getCssVariableValue('--chart-x-line'),
      },
    },
    {
      type: 'category',
      gridIndex: 1,
      data: xData,
      axisLine: {
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  ];
  const axisPointer = {
    link: [
      {
        xAxisIndex: 'all',
      },
    ],
    lineStyle: {
      color: getCssVariableValue('--chart-x-line'),
      type: 'solid',
    },
  };
  const toolbox = {
    show: false,
  };
  let yAxis = [
    {
      type: 'value',
      name: '元/MWh',
      gridIndex: 0,
      splitNumber: 5,
      position: 'left',
      axisLine: {
        show: false,
      },
      nameTextStyle: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      gridIndex: 1,
      position: 'left',
      splitNumber: 5,
      axisLine: {
        show: false,
      },
      nameTextStyle: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      gridIndex: 1,
      splitNumber: 5,
      name: '置信度/%',
      position: 'right',
      axisLine: {
        show: false,
      },
      nameTextStyle: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  yAxis =
    type === IBaseValueType.BASE
      ? [
          ...yAxis,
          {
            type: 'value',
            gridIndex: 0,
            splitNumber: 5,
            name: '基数比例预测/%',
            position: 'right',
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              color: getCssVariableValue('--chart-font-color'),
            },
            axisTick: {
              alignWithLabel: true,
              length: 4,
              lineStyle: {
                color: getCssVariableValue('--chart-y-line'),
              },
            },
            axisLabel: {
              color: getCssVariableValue('--chart-font-color'),
              fontStyle: 'DIN-Light',
              fontSize: 12,
              margin: 8,
              height: 12,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'solid',
                color: getCssVariableValue('--chart-y-line'),
              },
            },
          },
        ]
      : yAxis;

  let series = priceDiffCurveChartsLineTypeOptions.map((item) => {
    if (item.code === IPriceDiffCurveChartsLineType.LINE_FOUR) {
      return getSeri({
        name: item.name,
        type: 'bar',
        color: item.color,
        xAxisIndex: 1,
        yAxisIndex: 2,
        data: data[item.code]?.map((val) =>
          val.value === '-' ? val.value : ToFixed(val.value * 100, item.persion),
        ),
      });
    } else if (item.code === IPriceDiffCurveChartsLineType.LINE_FIVE) {
      return getSeri({
        name: item.name,
        type: 'line',
        color: item.color,
        xAxisIndex: 0,
        yAxisIndex: type === IBaseValueType.BASE ? 3 : 0,
        data: data[item.code]?.map((val) =>
          val.value === '-' ? val.value : ToFixed(val.value * 100, item.persion),
        ),
      });
    } else if (
      item.code === IPriceDiffCurveChartsLineType.LINE_THREE ||
      item.code === IPriceDiffCurveChartsLineType.LINE_SEVEN
    ) {
      return getSeri({
        name: item.name,
        type: 'line',
        color: item.color,
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data[item.code]?.map((val) =>
          val.value === '-' ? val.value : ToFixed(val.value, item.persion),
        ),
      });
    } else {
      return getSeri({
        name: item.name,
        type: 'line',
        color: item.color,
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: data[item.code]?.map((val) =>
          val.value === '-' ? val.value : ToFixed(val.value, item.persion),
        ),
      });
    }
  });
  series.push(
    getSeri({
      name: '',
      type: 'line',
      color: '#7A7D7F',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: Array.from({ length: 96 }, (v, i) => 0),
    }),
  );

  const option = getOptions({
    titleText: '',
    xAxis,
    axisPointer,
    yAxis,
    toolbox,
    XAXIS: [],
    legendData,
    dataZoom: [],
    grid,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatSpecialTooltip(e, date),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
          width: 1,
          type: 'solid',
        },
      },
    },
    legend: {
      ...option.legend,
      left: type === IBaseValueType.BASE ? '22%' : '28%',
    },
    series,
  };
}

// 功率预测及调整模拟图表
export function forecastAndSimulate(data = [], date) {
  const XAXIS = TIME_ENUM(defaultPointerNum);
  const grid = {
    top: 28,
    left: 46,
    bottom: 45,
    right: 46,
  };
  const yAxis = [
    {
      type: 'value',
      name: 'MW',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      name: '%',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const fixedListOne = data.filter((item) => {
    return item?.dataSource === IForecastAndSimulateChartsLineType.LINE_FIVE;
  });
  const fixedListTwo = data.filter((item) => {
    return item?.dataSource === IForecastAndSimulateChartsLineType.LINE_ONE;
  });
  const freeList = data.filter((item) => {
    return (
      item?.dataSource !== IForecastAndSimulateChartsLineType.LINE_ONE &&
      item?.dataSource !== IForecastAndSimulateChartsLineType.LINE_FIVE
    );
  });
  let _legendData = [];

  fixedListOne.forEach((item) => {
    let _item = {
      name: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
    };
    _legendData.push({
      ..._item,
    });
  });
  freeList.forEach((item, index) => {
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_TWO) {
      _legendData.push({
        name: item?.dataSource,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor:
          //   forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          // color: '#222629',
        },
      });
    }
    _legendData.push({
      name: item?.dataSource,
      itemStyle: {
        opacity: 1,
        borderWidth: 1,
        // borderColor: COLORLIST[index] || '#222629',
        // color: '#222629',
      },
    });
  });
  fixedListTwo.forEach((item) => {
    let _item = {
      name: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
    };
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_ONE) {
      _legendData.push({
        ..._item,
        itemStyle: { opacity: 1 },
      });
    } else {
      _legendData.push({
        ..._item,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor:
          //   forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          // color: '#222629',
        },
      });
    }
  });

  let _series = [];

  fixedListOne.forEach((item) => {
    const { values = [] } = item || {};
    let _item = {
      name: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
      type: 'line',
      color: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
    };
    const list = values?.length > 0 ? values : Array.from({ length: 96 }, (_, i) => '-');
    _series.push(
      getSeri({
        ..._item,
        type: 'bar',
        stack: 'one',
        data: list.map((item) => ToFixed(item, 3)),
      }),
    );
  });
  freeList.forEach((item, index) => {
    const { values = [] } = item || {};
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_TWO) {
      _series.push(
        getSeri({
          name: item?.dataSource,
          type: 'line',
          color: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    } else {
      _series.push(
        getSeri({
          name: item?.dataSource,
          type: 'line',
          color: COLORLIST[index] || '#222629',
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    }
  });
  fixedListTwo.forEach((item) => {
    const { values = [] } = item || {};
    let _item = {
      name: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
      type: 'line',
      color: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
    };
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_ONE) {
      _series.push(
        getSeri({
          ..._item,
          symbol: 'circle',
          data: values.map((item) => ToFixed(item, 0)),
          yAxisIndex: 1,
          lineStyle: {
            width: 1,
            type: 'dashed',
          },
        }),
      );
    } else {
      _series.push(
        getSeri({
          ..._item,
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    }
  });

  const option = getOptions({
    titleText: '',
    XAXIS,
    grid,
    dataZoom: [],
    yAxis,
    legendData: _legendData,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatNomalTooltip(e, date),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
    },
    xAxis: {
      ...option.xAxis,
      boundaryGap: true,
    },
    series: _series,
  };
}

// 策略引用图表
export function referenceStrategy(data = [], date) {
  const XAXIS = TIME_ENUM(defaultPointerNum);
  const grid = {
    top: 28,
    left: 46,
    bottom: 45,
    right: 46,
  };
  const legendData = [
    {
      name: TYPECOLOR[0].name,
      itemStyle: { opacity: 1, borderWidth: 1, borderColor: TYPECOLOR[0].color, color: '#222629' },
    },
    {
      name: TYPECOLOR[1].name,
      itemStyle: { opacity: 1, borderWidth: 1, borderColor: TYPECOLOR[1].color, color: '#222629' },
    },
    {
      name: TYPECOLOR[2].name,
      itemStyle: { opacity: 1, borderWidth: 1, borderColor: TYPECOLOR[2].color, color: '#222629' },
    },
    {
      name: TYPECOLOR[3].name,
      itemStyle: { opacity: 1, borderWidth: 1, borderColor: TYPECOLOR[3].color, color: '#222629' },
    },
  ];
  const yAxis = [
    {
      type: 'value',
      name: 'MW',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      name: '%',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const option = getOptions({
    titleText: '',
    XAXIS,
    legendData,
    dataZoom: [],
    grid,
    yAxis,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatNomalTooltip(e, date),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
    },
    series: [
      getSeri({
        type: 'line',
        name: TYPECOLOR[0].name,
        color: TYPECOLOR[0].color,
        data: data.map((item) => item.rateValue),
        yAxisIndex: 1,
      }),
      getSeri({
        type: 'line',
        name: TYPECOLOR[1].name,
        color: TYPECOLOR[1].color,
        data: data.map((item) => item.maxValue),
      }),
      getSeri({
        type: 'line',
        name: TYPECOLOR[2].name,
        color: TYPECOLOR[2].color,
        data: data.map((item) => item.minValue),
      }),
      getSeri({
        type: 'line',
        name: TYPECOLOR[3].name,
        color: TYPECOLOR[3].color,
        data: data.map((item) => item.fixedValue),
      }),
    ],
  };
}

// AI策略图表
export function aiAndSimulate(data = [], date) {
  const XAXIS = TIME_ENUM(defaultPointerNum);
  const grid = {
    top: 28,
    left: 46,
    bottom: 45,
    right: 46,
  };
  const yAxis = [
    {
      type: 'value',
      name: 'MW',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      name: '%',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const freeList = data;
  let _legendData = [];
  freeList.forEach((item, index) => {
    _legendData.push({
      name: item?.dataSource,
      itemStyle: {
        opacity: 1,
        borderWidth: 1,
        // borderColor: AICOLORLIST[index] || '#222629',
        // color: '#222629',
      },
    });
  });
  let _series = [];
  freeList.forEach((item, index) => {
    const { values = [] } = item || {};
    _series.push(
      getSeri({
        name: item?.dataSource,
        type: 'line',
        color: AICOLORLIST[index] || '#222629',
        data: values.map((item) => ToFixed(item, 3)),
      }),
    );
  });
  const option = getOptions({
    titleText: '',
    XAXIS,
    grid,
    dataZoom: [],
    yAxis,
    legendData: _legendData,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatNomalTooltip(e, date),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
    },
    xAxis: {
      ...option.xAxis,
      boundaryGap: true,
    },
    series: _series,
  };
}

// 人工策略图表
export function userAndSimulate(data = [], date) {
  const XAXIS = TIME_ENUM(defaultPointerNum);
  const grid = {
    top: 28,
    left: 46,
    bottom: 45,
    right: 46,
  };
  const yAxis = [
    {
      type: 'value',
      name: 'MW',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      name: '%',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: '#737373',
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12,
        margin: 8,
        height: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const freeList = data.filter((item) => {
    return item?.dataSource !== IUserAndSimulateChartsLineType.LINE_ONE;
  });
  const fixedListTwo = data.filter((item) => {
    return item?.dataSource === IUserAndSimulateChartsLineType.LINE_ONE;
  });

  let _legendData = [];

  freeList.forEach((item, index) => {
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_TWO) {
      _legendData.push({
        name: item?.dataSource,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor:
          //   forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          // color: '#222629',
        },
      });
    }
    _legendData.push({
      name: item?.dataSource,
      itemStyle: {
        opacity: 1,
        borderWidth: 1,
        // borderColor: USERCOLORLIST[index] || '#222629',
        // color: '#222629',
      },
    });
  });
  fixedListTwo.forEach((item) => {
    let _item = {
      name: userAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
    };
    if (item?.dataSource === IUserAndSimulateChartsLineType.LINE_ONE) {
      _legendData.push({
        ..._item,
        // itemStyle: { opacity: 1, color: '#222629' },
      });
    } else {
      _legendData.push({
        ..._item,
        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          // borderColor: userAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          // color: '#222629',
        },
      });
    }
  });

  let _series = [];
  freeList.forEach((item, index) => {
    const { values = [] } = item || {};
    if (item?.dataSource === IForecastAndSimulateChartsLineType.LINE_TWO) {
      _series.push(
        getSeri({
          name: item?.dataSource,
          type: 'line',
          color: forecastAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    } else {
      _series.push(
        getSeri({
          name: item?.dataSource,
          type: 'line',
          color: USERCOLORLIST[index] || '#222629',
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    }
  });
  fixedListTwo.forEach((item) => {
    const { values = [] } = item || {};
    let _item = {
      name: userAndSimulateChartsLineTypeOptions[item?.dataSource]?.name,
      type: 'line',
      color: userAndSimulateChartsLineTypeOptions[item?.dataSource]?.color || '#222629',
    };
    if (item?.dataSource === IUserAndSimulateChartsLineType.LINE_ONE) {
      _series.push(
        getSeri({
          ..._item,
          symbol: 'circle',
          data: values.map((item) => ToFixed(item, 0)),
          yAxisIndex: 1,
          lineStyle: {
            width: 1,
            type: 'dashed',
          },
        }),
      );
    } else {
      _series.push(
        getSeri({
          ..._item,
          data: values.map((item) => ToFixed(item, 3)),
        }),
      );
    }
  });

  const option = getOptions({
    titleText: '',
    XAXIS,
    grid,
    dataZoom: [],
    yAxis,
    legendData: _legendData,
  });
  return {
    ...option,
    tooltip: {
      ...option.tooltip,
      formatter: (e) => formatNomalTooltip(e, date),
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#A7A8A9',
          width: 1,
          type: 'solid',
        },
      },
    },
    xAxis: {
      ...option.xAxis,
      boundaryGap: true,
    },
    series: _series,
  };
}
